@using WebUI.Model

<header class="navbar is-black has-navbar-fixed-top" role="navigation" aria-label="main navigation">
  <div class="container is-flex-touch">
    <div class="navbar-brand">
      <NavLink href="/1" exact class="navbar-item">
        <strong>
          COOLSTORE UI
        </strong>
      </NavLink>
    </div>
    <div class="navbar-end is-flex-touch is-hidden-mobile">
      <div class="navbar-item">
        <div class="field">
          <p class="control control has-icons-left">
            <input class="input is-rounded" type="text" placeholder="Typing to search...">
            <span class="icon is-small is-left">
              <i class="fas fa-search"></i>
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="navbar-end is-flex-touch">
      <div class="navbar-item">
        <div class="field">
          <p class="control">
            <NavLink href="/new-item" class="button is-black">
              <span class="icon cartitem">
                <i class="fa fa-plus-circle"></i>
              </span>
              <span class="is-hidden-mobile">New</span>
            </NavLink>
          </p>
        </div>
      </div>
      <div class="navbar-item">
        <div class="field">
          <p class="control">
            <NavLink href="/cart" class="button is-black">
              <span class="icon cartcount">
                <i class="fa fa-shopping-cart"></i>
              </span>
              <span class="is-hidden-mobile">Cart</span>
            </NavLink>
          </p>
        </div>
      </div>
      <div class="navbar-item">
        <div class="field">
          <p class="control">
            @if (UserModel != null)
            {
              <NavLink href="/profile" class="button is-black">
                <span class="icon">
                  <i class="fa fa-user"></i>
                </span>
                <span class="is-hidden-mobile">@UserModel.Profile.Name</span>
              </NavLink>
            }
          </p>
        </div>
      </div>
    </div>
  </div>
</header>

@functions {

  [Parameter]
  protected UserModel UserModel { get; set; }

}
